<template>
  <div class="approval-node-item">
    <Card class="card-box">
      <div class="card-title" slot="title">
        <div class="title-time-wrapper">
          <div>
            <b class="approval-name">{{ node.nodeName }}</b>
            <span
              :class="`status-color-${node.flowState}`"
              v-if="Number(node.flowState)"
            >（{{ApprovalNodeStatus.toString(Number(node.flowState))}}）</span>
          </div>
          <span class="initiate-time" v-show="node.approvalTime">{{ node.approvalTime }}</span>
        </div>
        <div v-show="!isApprovalListView&&index!==0">
          <!-- 已有流程的节点的编辑节点按钮 -->
          <Button
            @click="handleNodeEditClickOnEdit"
            ghost
            icon="ios-create"
            size="small"
            type="primary"
            v-if="isApprovalEdit && node.canEdit"
          ></Button>
          <!-- 初始化流程的节点的编辑节点按钮 -->
          <Button
            @click="handleNodeEditClickOnNew"
            ghost
            icon="ios-create"
            size="small"
            type="primary"
            v-if="!isApprovalEdit"
          ></Button>
          <!-- 已有流程的节点的删除节点按钮 -->
          <Button
            @click="handleNodeDelClickOnEdit"
            ghost
            icon="md-close"
            size="small"
            type="error"
            v-if="isApprovalEdit && node.canEdit"
          ></Button>
          <!-- 初始化流程的节点的删除节点按钮 -->
          <Button
            @click="handleNodeDelClickOnNew"
            ghost
            icon="md-close"
            size="small"
            type="error"
            v-if="!isApprovalEdit"
          ></Button>
        </div>
      </div>
      <p>{{ node.approvalCompany }}</p>
      <div>
        <p>
          {{ node.approverName }}
          {{ node.phone }}
        </p>
      </div>
      <p v-if="node.optinions">备注：{{ node.optinions }}</p>
    </Card>
    <!-- 蓝色的，已有流程的add节点按钮 -->
    <Icon
      @click="handleAddProcessClickOnEdit"
      class="add-button"
      type="ios-add"
      v-if="isApprovalEdit && !isApprovalListView && node.canAdd"
    />
    <!-- 白色的，初始化流程的add节点按钮 -->
    <Icon
      @click="handleAddProcessClickOnNew"
      class="add-button"
      type="ios-add"
      v-if="!isApprovalEdit && !isApprovalListView"
    />
  </div>
</template>

<script>
import { ApprovalNodeStatus } from '@/config/cfg';

export default {
  props: {
    node: {
      type: Object,
      // required: true,
      default: function () {
        return {
          nodeName: '', // 节点名称
          approvalCompany: '', // 审批人公司
          approverName: '', // 审批人姓名
          phone: '',
          initiateTime: ''
        };
      }
    },
    isApprovalInit: {
      type: Boolean,
      required: true
    },
    index: {
      type: Number
    },
    isApprovalListView: Boolean,
    // 新增流程还是编辑流程
    isApprovalEdit: Boolean
  },
  data () {
    return {
      ApprovalNodeStatus
    };
  },
  mounted () {
    // console.log(this.node, 'node是啥');
  },
  methods: {
    handleNodeEditClickOnEdit () {
      this.$emit('on-edit-click');
    },
    handleNodeDelClickOnEdit () {
      this.$emit('on-del-click');
    },
    handleAddProcessClickOnEdit () {
      this.$emit('on-add-click');
    },
    handleNodeEditClickOnNew () {
      this.$emit('on-edit-click-local');
    },
    handleNodeDelClickOnNew () {
      this.$emit('on-del-click-local');
    },
    handleAddProcessClickOnNew () {
      this.$emit('on-add-click-local');
    }
  }
};
</script>

<style lang="less" scoped>
.approval-node-item {
  margin-bottom: 20px;
  .card-box {
    width: 90%;
    margin: auto;
    /deep/ .ivu-card-head {
      padding: 5px;
    }
    .card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title-time-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .initiate-time {
          font-size: 12px;
          color: #999;
        }
      }

      > div:nth-child(2) {
        height: 24px;
        .ivu-btn:nth-child(2) {
          margin-left: 10px;
        }
      }
      .approval-name {
        padding: 5px 0;
        display: inline-block;
      }
    }
  }
}
.add-button {
  font-size: 30px;
  background-color: #5a6fce;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  margin: 10px 0 0 10px;
}
.status-color-1 {
  color: #e6a23c;
}
.status-color-2 {
  color: #e6a23c;
}
.status-color-3 {
  color: #67c23a;
}
.status-color-4 {
  color: #f56c6c;
}
.status-color-5 {
  color: #f56c6c;
}
.status-color-6 {
  color: #e6a23c;
}
.status-color-7 {
  color: #67c23a;
}
</style>
